<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩图集</title>
    <link rel="stylesheet" href="/css/mobile/index.css">
    <link rel="stylesheet" href="/css/mobile/atlas/atlasdeleteimg.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">

    <style>
        .content{
            margin-top: 90px;
        }
        
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="nav-item active">
                <a href="#" class="nav-home">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-life">
                    <i class="fas fa-camera"></i>
                    <span>生活瞬间</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-tour">
                    <i class="fas fa-plane"></i>
                    <span>旅行记录</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-atlas">
                    <i class="fas fa-images"></i>
                    <span>精彩图集</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-center">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="content">
        <div class="header">
            <h1>选择图片</h1>
        </div>
        
        <div class="gallery" id="gallery">
            <!-- 图片将通过JavaScript动态加载 -->
        </div>
        
        <div class="footer">
            <div class="selected-count" id="selectedCount">已选择 0 张</div>
            <button class="confirm-btn" id="confirmBtn" disabled>提交</button>
        </div>
    </div>
</body>


<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script type="module">

	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const navhome = document.querySelector('.nav-home'); // 返回第一个匹配的节点
	const navlife = document.querySelector('.nav-life'); // 返回第一个匹配的节点
	const navatlas = document.querySelector('.nav-atlas'); // 返回第一个匹配的节点
	const navcenter = document.querySelector('.nav-center');//获取个人中心DOM


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	navhome.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	navlife.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	navatlas.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
    navcenter.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

    //使用ejs模版来返回数据
    let resultData = <%- JSON.stringify(json) %>;

    // 简单的导航栏交互效果
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelector('.nav-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });

    // 模拟图片数据
    let images = resultData.Atlasimgs;
    
    const gallery = document.getElementById('gallery');
    const selectedCount = document.getElementById('selectedCount');
    const confirmBtn = document.getElementById('confirmBtn');
    
    let selectedImages = [];
    let arrayimages = [];
    
    // 渲染图片库
    function renderGallery() {
        gallery.innerHTML = '';
        images.forEach((img, index) => {
            const isSelected = selectedImages.includes(index);
            
            const item = document.createElement('div');
            item.className = 'image-item';
            item.innerHTML = `
                <img src="${server_ip + "/" + img.imgurl}" alt="${img.imgname}">
                <div class="checkbox ${isSelected ? 'selected' : ''}"></div>
            `;
            
            item.addEventListener('click', () => toggleSelect(index,img.imgname));
            gallery.appendChild(item);
        });
        
        updateSelectionCount();
    }
    
    // 切换选择状态
    function toggleSelect(index,imgname) {
        const selectedIndex = selectedImages.indexOf(index);
        const selectedImagesname = arrayimages.indexOf(imgname);
        if (selectedIndex > -1) {
            selectedImages.splice(selectedIndex, 1);
            arrayimages.splice(selectedImagesname, 1);
        } else {
            selectedImages.push(index);
            arrayimages.push(imgname);
        }
        renderGallery();
    }
    
    // 更新选择计数
    function updateSelectionCount() {
        const count = selectedImages.length;
        selectedCount.textContent = `已选择 ${count} 张`;
        confirmBtn.disabled = count === 0;
    }
    
    // 确认按钮点击事件
    confirmBtn.addEventListener('click', () => {
        // alert(`已选择 ${selectedImages.length} 张图片: ${selectedImages.join(', ')}`);
        // 这里可以添加实际业务逻辑
        console.log(arrayimages);
        if(arrayimages.length<=0){
            alert("请选择图片");
            return;
        }
        let deleteImgData = {
            Atlas_id: resultData.Atlas_id,
            Atlasimgs: arrayimages
        }
        axios
            .post(
                atlas_ip + "/deleteimg",
                deleteImgData,
                {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                }
            )
            .then((res) => {
                //判断后端的报错信息。如果存在则保存失败
                // console.log(res.data);
                if(res.data.message.success){
                    alert("删除成功");
                    location.reload();
                }else{
                    alert("删除失败");
                }
            })
            .catch(err => {
                console.log(err);
                alert("拒绝访问");
            });
    });
    
    // 初始化
    renderGallery();
    

</script>
</html>